<template>
  <div class="aside">
    <el-aside>
      <el-menu
        :default-active="active"
        :router="true">
        <el-menu-item
          v-for="item in itemMenu"
          :id="item.path"
          :index="item.path">

          <!-- icon -->
          <el-icon :size="20">
            <component :is="item.icon"/>
          </el-icon>

          {{ item.title }}
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>

<script setup>
const props = defineProps({
  active: String,
  itemMenu: Array,
})
</script>

<style scoped>
.aside {
  width: 200px !important;
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  box-shadow: 1px 0 2px 0 rgb(0 0 0 / 10%);
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.aside::-webkit-scrollbar {
  display: none;
}

.el-aside {
  border-top: 1px solid var(--el-border-color-light);
}

.el-menu-item {
  /* background-color: #222832; */
  color: #353535;
  border-bottom: 1px solid rgba(91, 91, 91, 20%);
}


.el-menu .el-menu-item.is-active [class^='el-icon-'] {
  color: #1baeae;
}

.el-menu-item [class^='el-icon-'] {
  color: #999;
}
</style>
